<!-- 搜索组件 -->
<template>
  <!-- <template v-if="item.type === 'input'">
      <span style="font-size: 14px; color: #666666; margin-left: 20px">{{ item.name }}</span>
      <span class="input">
        <el-input v-model="a" placeholder="请输入" style="border: 0; outline: 0" />
      </span>
    </template>

    <template v-if="item.type === 'select'">
      <span style="font-size: 14px; color: #666666; margin-left: 20px">{{ item.name }}</span>
      <span class="input">
        <el-select :placeholder="item.placeholder" style="border: 0; outline: 0">
          <template v-for="i in item.options" :key="i.label">
            <el-option :label="i.label" :value="i.value" />
          </template>
        </el-select>
      </span>
    </template> -->

  <el-col style="display: flex; align-items: center; padding-top: 20px">
    <el-form ref="dataFormRef" label-width="120px" class="input1">
      <template v-for="item in my" :key="item.value">
        <el-form-item :label="item.name" :prop="item.field">
          <el-input
            v-if="item.type === 'input'"
            :model-value="modelValue[`${item.field}`]"
            @update:modelValue="valueChange($event, item.field)"
            :type="item.type"
            :placeholder="item.placeholder"
            class="input"
          />

          <el-select
            v-if="item.type === 'select'"
            style="padding: 0"
            :model-value="modelValue[`${item.field}`]"
            @update:modelValue="valueChange($event, item.field)"
            :placeholder="item.placeholder"
            class="input"
          >
            <template v-for="i in item.options" :key="i.label">
              <el-option :label="i.label" :value="i.value" />
            </template>
          </el-select>

          <el-date-picker
            style="width: 180px; margin-left: 20px"
            :model-value="modelValue[`${item.field}`]"
            @update:modelValue="valueChange($event, item.field)"
            type="datetime"
            :placeholder="item.placeholder"
            :shortcuts="shortcuts"
            v-if="item.type === 'datepicker'"
            clear-icon=""
          />
        </el-form-item>

        <!-- <el-form-item :label="item.name" prop="pass" v-if="item.type === 'datepicker'">
        <el-select v-model="modelValue.pass" :placeholder="item.placeholder" style="border: 0; outline: 0">
          <template v-for="i in item.options" :key="i.label">
            <el-option :label="i.label" :value="i.value" />
          </template>
        </el-select>
      </el-form-item> -->
      </template>
      <el-form-item>
        <slot name="footer"></slot>
      </el-form-item>
    </el-form>
  </el-col>
</template>

<script setup lang="ts">
import { defineProps, withDefaults, defineEmits } from 'vue'
import { Item2 } from '../../searchconfig/two'
import { reactive, ref } from 'vue'
// import { useRoute } from 'vue-router'
// const route = useRoute()
const shortcuts = [
  {
    text: 'Today',
    value: new Date()
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    }
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    }
  }
]
interface User {
  my: Item2[]
  modelValue: any
}
const props = withDefaults(defineProps<User>(), {
  my: () => []
})
console.log('snisdhih', props)
const emit = defineEmits<{
  (e: 'update:modelValue', value: any): void
}>()
// 输入框值改变该函数都会触发，将改变后的值传出去
const valueChange = (value: any, field: string) => {
  emit('update:modelValue', { ...props.modelValue, [field]: value })
}
</script>

<style scoped>
.input {
  display: flex;
  height: 35px;
  width: 200px;
  border: 1px solid #999999;
  margin-left: 20px;
  padding-left: 20px;
  border-radius: 5px;
  overflow: hidden;
}
.input1 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
/* 去除输入框的边框 */
.input >>> .el-input__wrapper {
  border: 0 !important;
  outline: none;
  box-shadow: none;
  border: 0;
}
/* 调整select默认字体的位置 */
:deep(.el-select .el-input__inner) {
  cursor: pointer;
  padding-left: 20px;
  outline: none;
}
/* 调整select右边箭头的边距 */
:deep(.el-input__suffix-inner > :first-child) {
  margin-right: 10px;
  margin-left: 0px;
}
:deep(.el-input__suffix-inner > :last-child) {
  margin-right: 10px;
  margin-left: 0px;
}
:deep(.el-input__inner) {
  width: 180px;
  height: 35px;
}
/* 去除输入框的padding */
:deep(.el-input__wrapper) {
  padding: 0;
  border: 1px solid #999999;
  width: 200px;
  height: 35px;
  outline: none;
}
</style>
